<!DOCTYPE html>
<html>
    <head>
        <!-- 页面meta -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>传智健康</title>
        <meta name="description" content="传智健康">
        <meta name="keywords" content="传智健康">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <!-- 引入样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="../css/style.css">
        <!-- 引入组件库 -->
        <script type="text/javascript" src="../js/jquery.min.js"></script>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <script src="../js/axios-0.18.0.js"></script>
        <style>
        </style>
    </head>
    <body >
        <div id="app">
            <div >
                <!-- 查询表单 -->
                <!--查询表单-->
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item>
                        <el-input v-model="searchObj" placeholder="角色名称"/>
                    </el-form-item>

                    <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
                    <el-button type="default" @click="resetData()">清空</el-button>
                </el-form>

                <!-- 工具条 -->
                <div>
                    <el-button type="danger" size="mini" @click="addUser()" >添加</el-button>
                    <el-button type="danger" size="mini" @click="removeRows()" >批量删除</el-button>

                </div>





                <el-table
                        v-loading="listLoading"
                        ref="multipleTable"
                        :data="list"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="300">
                    </el-table-column>
                    <el-table-column
                            label="角色名"
                            width="300">
                        <template slot-scope="scope">{{ scope.row.name }}</template>
                    </el-table-column>
                    <el-table-column
                            label="keyword"
                            prop="keyword"
                            width="300">
                    </el-table-column>
                    <el-table-column label="操作" width="600" >
                        <template slot-scope="scope">
                            <el-button type="info" size="mini"  @click="editAclRole(scope.row.id)">权限修改</el-button>
                            <el-button type="info" size="mini"  @click="openEditMenu(scope.row.id)">菜单权限修改</el-button>
                            <el-button type="info" size="mini"  @click="editRole(scope.row.id)">角色信息修改</el-button>
                            <el-button type="danger" size="mini"  @click="removeDataById(scope.row.id)">删除角色</el-button>
                        </template>
                    </el-table-column>
                </el-table>






 <!--&lt;!&ndash; 讲师列表 &ndash;&gt;
 <el-table
 v-loading="listLoading"
 :data="list"
 style="width: 100%"
 @selection-change="handleSelectionChange">

 <el-table-column
   type="selection"
   width="180" />
 <el-table-column
   label="序号"
   width="180">
   <template slot-scope="scope">
     {{ (page - 1) * limit + scope.$index + 1 }}
   </template>
 </el-table-column>

 <el-table-column label="角色名称" />
 <el-table-column  label="keyword" />


 <el-table-column label="操作" width="200" >
   <template slot-scope="scope">
       <el-button type="info" size="mini" icon="el-icon-info"  @click="editAclRole(scope.row.id)"></el-button>
       <el-button type="primary" size="mini" icon="el-icon-edit" @click="editRole(scope.row.id)" ></el-button>
     <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)"></el-button>
   </template>
 </el-table-column>
</el-table>-->
              

                <!-- 分页组件 -->
                <el-pagination
                        :current-page="page"
                        :total="total"
                        :page-size="limit"
                        :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
                        style="padding: 30px 0; text-align: center;"
                        layout="sizes, prev, pager, next, jumper, ->, total, slot"
                        @current-change="fetchData"
                        @size-change="changeSize"
                />
            </div>  
         <!--页面修改-->      
         <el-dialog
         title="提示"
         :visible.sync="dialogMenuVisible"
         width="30%">
         <el-tree
         :data="menuTreeData"
         default-expand-all
         show-checkbox
         node-key="id"
         ref="tree"
         highlight-current
         :default-expanded-keys="defaultexpandedkeys"
         :default-checked-keys="defaultcheckedkeys"
         :props="defaultProps">
       </el-tree>
         <span slot="footer" class="dialog-footer">
           <el-button @click="restMenu()">取 消</el-button>
           <el-button type="primary" @click="editMenuByRoleId()">确 定</el-button>
         </span>
       </el-dialog>
      


            <el-dialog
            title="角色赋权"
            :visible.sync="aclRoleDialogVisible"
            width="30%"
            center>
                <input type="hidden" v-model="useRoleId"/>
            <div style="margin: 20px 20px">

                <div class="checkScrol">
                    <table class="datatable">
                        <thead>
                        <tr>
                            <th>选择</th>
                            <th>序号</th>
                            <th>角色名称</th>
                            <th>keyword</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="c in data">
                            <td>
                                <input :id="c.id" v-model="checkPermission" type="checkbox" :value="c.id">
                            </td>
                            <td><label :for="c.id" >{{c.id}}</label></td>
                            <td><label :for="c.id">{{c.name}}</label></td>
                            <td><label :for="c.id">{{c.keyword}}</label></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <el-button  type="primary"  @click="save">保存</el-button>
              </div>
          </el-dialog>

          <el-dialog
          :title="roletext"
          :visible.sync="addorEditRoleDialogVisible"
          width="30%"
          center>
            <el-form  :model="roleForm" label-width="120px">
                <el-form-item label="角色名称">
                  <el-input v-model="roleForm.name"/>
                </el-form-item>
                <el-form-item label="keyword" >
                    <el-input v-model="roleForm.keyword"/>
                  </el-form-item>
              <el-form-item>
                  <el-button  type="primary" @click="saveOrUpdate">保存</el-button>
                </el-form-item>
              </el-form>
        </el-dialog>
        
 
         
        </div>
    </body>

    <script>
        var vue = new Vue({
            el: '#app',
            data:{
                deleteCheckBoxByRoleIds:[],
                RoleId:'',//保存菜单时用的角色id
                menuTreeData:[],//菜单显示数据
                defaultexpandedkeys:[],//menutree默认展开的节点
                defaultcheckedkeys:[],//默认选中的节点
                defaultProps: {
                children: 'children',
                label: 'name'},
                dialogMenuVisible:false,//菜单弹窗
                useRoleId:0,
                RIDpermission:[],
                checkPermission:[],
                list:[],//显示的角色的列表
                roletext:"添加角色",
                roleForm:{},//角色菜单(添加/修改)
                data:[],//角色的权限列表数据
                addorEditRoleDialogVisible:false,//修改角色按钮
                aclRoleDialogVisible:false,//角色赋权按钮
                listLoading: true, // 数据是否正在加载
                total: 0, // 数据库中的总记录数
                page: 1, // 默认页码
                limit: 10, // 每页记录数
                searchObj:""//查询的数据
              
            },
            created() {
                console.log('list created......')
                this.fetchData()
            },
            methods: {
                //点击选择框时触发的
                handleSelectionChange(val){
                    this.deleteCheckBoxByRoleIds=val
                },
                removeRows(){
                    var deleteIds= this.deleteCheckBoxByRoleIds.map(item=>item.id)
                    console.log('删除的ids'+deleteIds);
                    //发送ajax
                    axios.get(`/role/deleteRoleByRoleIds.do?roleIds=`+deleteIds).then((res)=>{
                        if(res.data.flag){
                            this.$message({
                                type:'success',
                                message:'删除成功'
                            })
                        }else{
                            this.$message({
                                type:'error',
                                message:'删除失败'
                            })
                        }
                    }).finally(()=>{
                        //刷新页面
                        this.fetchData()
                        //清除
                        this.deleteCheckBoxByRoleIds=[]
                    })
                },



                //保存角色的权限
                save(){

                    axios.get(`/role/editPermissionByRoleId/${this.useRoleId}.do?checkPermission=`+this.checkPermission).then((res)=>{
                        //关闭弹出床
                        this.aclRoleDialogVisible=false
                        if(res.data.data.flag){
                            //操作成功
                            this.$message({
                                type:'success',
                                message:res.data.data.message
                            });
                        }else{
                            //操作失败
                            this.$message.error(res.data.message);
                        }

                    }).finally(()=>{
                        this.fetchData()

                    })
                },
                //判断是保存还是修改操作
                saveOrUpdate(){
                   if (this.roleForm.id) {
                       //执行修改
                       axios.post("/role/editRole.do",this.roleForm).then((res)=>{
                           //管弹窗
                           this.addorEditRoleDialogVisible=false
                           if(res.data.data.flag){
                               //操作成功
                               this.$message({
                                   type:'success',
                                   message:res.data.data.message
                               });
                           }else{
                               //操作失败
                               this.$message.error(res.data.message);
                           }

                       }).finally(()=>{
                           //清空表单
                           this.roleForm={}
                           this.fetchData()

                       })
                   }else{
                       axios.post("/role/addRole.do",this.roleForm).then((res)=>{
                           //管弹窗
                           this.addorEditRoleDialogVisible=false
                           if(res.data.data.flag){
                               //操作成功
                               this.$message({
                                   type:'success',
                                   message:res.data.message
                               });
                           }else{
                               //操作失败
                               this.$message.error(res.data.message);
                           }
                           //管弹窗
                           this.addorEditRoleDialogVisible=false
                       }).finally(()=>{
                           //清空表单
                           this.roleForm={}
                           this.fetchData()
                       })
                   }
                },
                //修改角色
                editRole(id){
                    this.roletext="修改角色"
                    this.addorEditRoleDialogVisible=true
                   //回显数据
                    axios.get(`/role/findRoleById/${id}.do`).then((res)=>{
                        this.roleForm=res.data.data
                    })
                },
                //添加角色
                addUser(){
                    this.roleForm={}
                    this.roletext="添加角色"
                   this.addorEditRoleDialogVisible=true
                },
               //显示角色有的权限
               editAclRole(id){
                    this.useRoleId=id
                   console.log(this.useRoleId)
                   this.checkPermission=[]
                  this.aclRoleDialogVisible=true
                   //查询是所有的权限
                   axios.get(`/permission/findAllPermission.do`).then((res)=>{
                       this.data=res.data.data

                   })
                   //axios查询当前用户的权限
                   axios.get(`/role/findPermissionByRoleId/${id}.do`).then((res) =>{
                       this.RIDpermission=res.data.data
                       for (var i=0;this.RIDpermission.length>i;i++) {
                           var roid= this.RIDpermission[i].id;
                           this.checkPermission.push(roid);
                       }
                       console.log(this.checkPermission)
                   })
               },
              //删除角色
              removeDataById(id){
                  this.$confirm('此操作将永久删除该记录,是否继续?','提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }).then(()=>{
                            //axios请求
                  }).catch(()=>{
                      this.$message({
                        type: 'info',
                        message: '已取消删除'
                      })
                  })

              },


                // 当页码发生改变的时候
                changeSize(size) {
                    console.log(size)
                    this.limit = size
                    this.fetchData(1)
                },
                //改变页码
                fetchData(page=1){
                  //发送axios查询role列表
                  axios.post(`/role/listByPage/${this.page}/${this.limit}.do`,{'query':this.searchObj}).then((res)=>{
                      console.log(this.searchObj)
                    this.list = res.data.data.rows;//当前页展示的数据集合
                    this.total = res.data.data.total;//总数据量
                      console.log(this.list)
                    //关闭转圈圈
                    this.listLoading = false                                                
                  })
                },
                //清空查询
                resetData(){
                    this.searchObj='';
                    this.fetchData(1);
                },
            
                //角色的菜单操作----------------------------------------------------------------------------------------------------------
                   //保存角色的菜单
                editMenuByRoleId(){
                    var ids = this.$refs.tree.getCheckedKeys().join(",");
                    console.log("要保存的菜单id"+ids);
                    console.log("getCheckedNodes"+this.$refs.tree.getCheckedNodes());
                    console.log("getCheckedKeys"+this.$refs.tree.getCheckedKeys());

                    axios.get(`/role/editMenuByRoleId/${this.RoleId}.do?menuIds=`+ids).then((res)=>{
                        if(res.data.flag){
                            this.$message({
                                tyep:'success',
                                message:'保存菜单成功'
                            })
                        }else{
                            this.$message({
                                type:'error',
                                message:'保存菜单失败'
                            })
                        }
                    }).finally(()=>{
                       this.dialogMenuVisible=false//菜单弹窗
                        this.defaultexpandedkeys=[]
                        this.defaultcheckedkeys=[]

                    })
                },
                //打开菜单弹窗
                openEditMenu(id){
                    this.menuTreeData=[]
                    this.RoleId=id
                    this.dialogMenuVisible=true//菜单弹窗
                    //显示当前角色的所有的菜单
                  axios.get(`/role/findMenusByRoleId/${id}.do`).then((res)=>{
                          this.defaultexpandedkeys=res.data.data
                          this.defaultcheckedkeys=res.data.data
                  })
                    axios.get(`/menu/findAllMenu.do`).then((res)=>{
                        this.menuTreeData=res.data.data
                    })
                },
              

                //取消菜单弹窗的操作
                restMenu(){
                this.defaultexpandedkeys=[]
                this.defaultcheckedkeys=[]
                this.dialogMenuVisible=false
                }

               //角色的菜单操作----------------------------------------------------------------------------------------------------------
            }

        })
    </script>
</html>
